<script setup lang="ts">
import { reactive } from "vue";
import { regionData, CodeToText } from "@/utils/chinaArea";

// 声明 props 类型
export interface FormProps {
  action?: string;
  formInline?: {
    user: string;
    region: string;
    region2: string[];
  };
}

const props = withDefaults(defineProps<FormProps>(), {
  action: "create",
  formInline: () => ({ user: "", region: "", region2: ["", "", ""] })
});
const newFormInline = reactive(props.formInline);

const handleChange = () => {};
</script>

<template>
  <el-form :model="newFormInline" class="min-w-[420px]">
    <el-form-item label="姓名">
      <el-input
        v-model="newFormInline.user"
        class="w-[220px]!"
        placeholder="请输入姓名"
      />
    </el-form-item>
    <el-form-item label="城市">
      <el-select
        v-model="newFormInline.region"
        class="w-[220px]!"
        placeholder="请选择城市"
      >
        <el-option label="上海" value="上海" />
        <el-option label="浙江" value="浙江" />
        <el-option label="深圳" value="深圳" />
      </el-select>
    </el-form-item>
    <el-form-item label="城市2">
      <el-cascader
        v-model="newFormInline.region2"
        :options="regionData"
        @change="handleChange"
      />
    </el-form-item>
    <div>
      区域码转汉字：
      {{ CodeToText[newFormInline.region2[0]] }},
      {{ CodeToText[newFormInline.region2[1]] }},
      {{ CodeToText[newFormInline.region2[2]] }}
    </div>
  </el-form>
</template>
